<template>
  <div class="container">
    <div class="p16" style="">
      <el-form ref="form" :model="form" label-width="80px">
        <div style="width:900px">
          <el-form-item label="标题文字">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <el-form-item label="左侧图片">
            <el-upload
              action=""
              list-type="picture-card"
              :http-request="handleCustomUpload"
              :show-file-list="false"
            >
              <div class="modelBox" v-if="form.url.url" @click.stop>
                <div class="model">
                  <i class="el-icon-zoom-in" @click="handlePictureCardPreview(form.url.url)"></i>
                  <i class="el-icon-delete" @click="handleDeleteUpload(1)"></i>
                </div>
                <img  :src="form.url.url" class="el-upload--picture-card" />
              </div>
              <i slot="default" class="el-icon-plus" v-else></i>
            </el-upload>
            <span class="tips">请上传png格式，尺寸建议为520px*420px</span>
          </el-form-item>
          <el-form-item label="小标题1">
            <el-input v-model="form.subititle2"></el-input>
          </el-form-item>
          <el-form-item label="小标题2">
            <el-input v-model="form.subititle3"></el-input>
          </el-form-item>
        </div>
        <div class="list">
          <div class="list-item" v-for="(item,index) in form.urlList" :key="index">
            <div class="head">分类{{ modelIndex[index] }}</div>
            <el-form-item label="图标">
              <el-upload
                action=""
                list-type="picture-card"
                :http-request="(file)=>handleCustomUploadRow(file,index)"
                :show-file-list="false"
              >
                <div class="modelBox" v-if="item.url" @click.stop>
                  <div class="model">
                    <i class="el-icon-zoom-in" @click="handlePictureCardPreview(item.url)"></i>
                    <i class="el-icon-delete" @click="handleDeleteUpload(2,index)"></i>
                  </div>
                  <img  :src="item.url" class="el-upload--picture-card" />
                </div>
                <i slot="default" class="el-icon-plus" v-else></i>
              </el-upload>
              <span>请上传png格式，尺寸建议为14px*14px</span>
            </el-form-item>
            <el-form-item label="文字" style="margin:6px 6px 6px 0">
              <el-input v-model="item.name"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-image-viewer
      v-if="isShowImgView"
      :url-list="dialogImageUrl"
      :initial-index="0"
      :on-close="closeViewer"
      :z-index="3000"
    />
  </div>
</template>
    <script>
import { arraySort } from "@/utils";
import { mapGetters } from "vuex";
export default {
  name: "printAdmin",
  components: {
    "el-image-viewer": () =>
      import("element-ui/packages/image/src/image-viewer"),
  },
  data() {
    return {
      form:{
        url:{
          url:''
        }
      },
      isShowImgView:false,
      modelIndex:['一','二','三','四'],
      dialogImageUrl:[]
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData(){
        this.$api.system.GetList(5).then((res)=>{
        this.form = res[0]
        })
      },
    handleSave(){
      this.$api.system.Update(this.form).then(res=>{
          this.$message.success('保存成功！')
          this.getData()
        })
    },
    handleCustomUpload(e){
      const file = e.file;
      const type = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (
        type !== "png" &&
        type !== "jpg" &&
        type !== "jpeg" &&
        type !== "gif" &&
        type !== "bmp"
      ) {
        this.$message.error("上传图片格式错误，请重新上传!");
        return false;
      } else {
          var formData = new FormData();
            formData.append("file", file);
            formData.append("output", 'json2');
            this.$api.system.upload(formData).then((res) => {
              let prefix = '/assets'
              this.form.url.url = prefix+res.src
              console.log(this.form)
              this.$message.success("上传成功！");
            });
      }
    },
    handlePictureCardPreview(url){
      this.dialogImageUrl = []
      this.dialogImageUrl.push(url)
      this.isShowImgView = true
    },

    handleDeleteUpload(type,index){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(type == 1){
            this.form.url.url = ''
          }else if(type ==2){
            this.form.urlList[index].url = ''
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.$forceUpdate()
        }).catch(() => {
        });
    },

    handleCustomUploadRow(e,index){
      const file = e.file;
      const type = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (
        type !== "png" &&
        type !== "jpg" &&
        type !== "jpeg" &&
        type !== "gif" &&
        type !== "bmp"
      ) {
        this.$message.error("上传图片格式错误，请重新上传!");
        return false;
      } else {
          var formData = new FormData();
            formData.append("file", file);
            formData.append("output", 'json2');
            this.$api.system.upload(formData).then((res) => {
              let prefix = '/assets'
              this.form.urlList[index].url = prefix+res.src
              this.$message.success("上传成功！");
            });
      }
    },
    closeViewer(){
      this.isShowImgView = false
    }
  },
};
</script>
    <style lang="scss" scoped>
    .container::v-deep{
      $sizeWidth:300px;
      $sizeHeight:222px;
      margin-bottom: 8px;
      .tips{
        color: rgba(153, 153, 153, 1);
      }
      .list-item{
        width: 375px;
        border: 1px solid #e8e8e8;
        .head{
          margin-bottom: 6px;
          padding-left: 16px;
          display: flex;
          align-items: center;
          height: 40px;
          opacity: 1;
          background: rgba(253, 240, 255, 1);
        }

        .el-form-item__label{
          width: 60px !important;
        }

        .el-form-item__content{
          display: flex;
          align-items: center;
          margin-left: 60px !important;
          span{
            padding-left: 13px;
            line-height: 20px;
            font-size: 14px;
            color: rgba(153, 153, 153, 1);
          }
        }
        img{
          max-width: 100%;
          height: 100%;
          line-height: 80px;
        }

        .modelBox{
          height: 100%;
        }

        .el-icon-plus{
          line-height: 80px;
        }

        .el-upload{
          width: 78px;
          height: 78px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .modelBox{
        width: 100%;
        height: 100%;
        img{
          width: 100%;
          height: 100%;
        }
        .model{
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          background-color: rgba(0, 0, 0, 0.5);
          z-index: 2;
          
          >*{
            font-size: 20px;
            color: #fff;
            &:hover{
              color: #3f61f1;
            }
            &:not(:last-child){
              margin-right: 8px;
            }
          }
        }
        &:hover{
          .model{
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
      .el-upload{
        width: #{$sizeWidth};
        height: #{$sizeHeight};
        position: relative;
        display:flex;
    align-items:center;
    justify-content:center;
        .tag{
          position: absolute;
          left: 0;
          top: 0;
          padding: 4px 6px;
          line-height: 1.2em;
          background: rgba(0, 0, 0, 0.75);
          color: #fff;
          font-size: 12px;
          border-radius: 6px 0 4px 0;
          z-index: 2;
        }
      }
      .img_box{
        width: #{$sizeWidth};
        height: #{$sizeWidth} ;
        position: relative;
        img{
          max-width: 100%;
          height: 100%;
        }
      }
      .img_boxMore{
        display: flex;
        flex-wrap: wrap;
        margin-right: -8px;
        margin-bottom: -8px;
        .img_box{
          border-radius:8px;
          border: 1px #dcdfe6 solid;
          overflow: hidden;
          margin-right: 8px;
        }
        >*{
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
</style>
